<template>
  <div>
    <searchBox @handleSearch="handleSearch" @handleReset="handleReset">
      <el-form :inline="true" :model="searchFrom.param" label-width="auto" style="width: calc(100% - 150px)"
        ref="acquisitionWebFrom" label-position="left">
        <el-form-item label="采集网站" prop="name">
          <el-input v-model.trim="searchFrom.param.name" clearable placeholder="请输入" />
        </el-form-item>

        <el-form-item label="采集类型" prop="collectionTypeId">
          <el-select v-model="searchFrom.param.collectionTypeId" placeholder="请选择" style="width: 200px" clearable>
            <el-option v-for="dict in sys_acquisition_type" :key="dict.value" :label="dict.label"
              :value="dict.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="语言" prop="languageId">
          <el-select v-model="searchFrom.param.languageId" placeholder="请选择" style="width: 200px" clearable>
            <el-option v-for="dict in sys_language_type" :key="dict.id" :label="dict.description"
              :value="dict.id"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="货币" prop="currencyId">
          <el-select v-model="searchFrom.param.currencyId" placeholder="请选择" style="width: 190px" clearable>
            <el-option v-for="dict in sys_acquisition_currency" :key="dict.value" :label="dict.label"
              :value="dict.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="状态" prop="status">
          <el-select v-model="searchFrom.param.status" placeholder="请选择" style="width: 200px" clearable>
            <el-option v-for="dict in sys_status_type" :key="dict.value" :label="dict.label"
              :value="dict.value"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
    </searchBox>
      <el-button type="primary" @click="addEditor" class="mb8">新增</el-button>
    <el-table :data="tableData" style="height: calc(100vh - 335px)" v-loading="loading">
      <el-table-column prop="id" label="ID" width="100" />
      <el-table-column label="采集网站" prop="name" />
      <el-table-column prop="collectionTypeName" label="采集方式" />
      <el-table-column prop="url" label="URL">
        <template #default="scope">
          <el-link :href="scope.row.url" target="_blank" type="primary">{{ scope.row.url
            }}</el-link>
        </template>
      </el-table-column>
      <el-table-column prop="languageName" label="语言" />
      <el-table-column prop="currencyName" label="货币" />
      <el-table-column prop="status" label="状态" align="center">
        <template #default="scope">
          <el-switch v-model="scope.row.status" :active-value="1" :inactive-value="0" active-text="开启"
            inactive-text="关闭" inline-prompt @change="handleStatusChange(scope.row)"></el-switch>
        </template>
      </el-table-column>

      <el-table-column  label="描述">
        <template #default="scope">
          <el-tooltip effect="dark" placement="top-start">
            <template #content>
               <div style="max-width: 500px;">
                {{ scope.row.description }}
              </div>
            </template>
            <el-text line-clamp="2">{{ scope.row.description }}</el-text>
          </el-tooltip>
        </template>
      </el-table-column>


      <el-table-column label="操作" align="center">
        <template #default="scope">
          <el-button link type="primary" @click="handleEditor(scope.row)">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页组件 -->
    <Pagination :total="total" :limit="searchFrom.pageSize" :page="searchFrom.pageNum" @pagination="handlePageChange">
    </Pagination>
    <orderEditor :dialogVisible="dialogVisible" :item="publicFrom" @handleSure="handleSure" @handleClose="handleClose">
    </orderEditor>
  </div>
</template>
<script setup>
import { reactive, ref, onMounted } from "vue";
import orderEditor from "./components/orderEditor.vue";
const { proxy } = getCurrentInstance();
const searchFrom = ref({
  pageNum: 1,
  pageSize: 10,
  param: {
    name: "", //网站名字
    collectionTypeId: "", //采集站点所用的采集类型Id
    languageId: "", //采集到的语言Id
    currencyId: "", //采集到的货币Id
    status: "",
  },
});
const sys_acquisition_currency = ref([]); //获取货币
const sys_language_type = ref([]); //获取语言类别
const sys_acquisition_type = ref([]); //获取采集类型
const switchStatus = ref(true);
const { sys_status_type } = proxy.useDict("sys_status_type"); //采集类型

const total = ref(0);
const publicFrom = ref({}); //公共赋值对象
const dialogVisible = ref(false);
const tableData = ref([]);
const loading = ref(true)
// 搜搜
const handleSearch = () => {
  getList();
};
// 重置
const handleReset = () => {
  proxy.resetForm("acquisitionWebFrom");
  handleSearch();
};
// 编辑
const handleEditor = (rowItem) => {
  // console.log(rowItem);
  publicFrom.value = rowItem;
  dialogVisible.value = true;
};

// 新增
const addEditor = () => {
  publicFrom.value = {};
  dialogVisible.value = true;
};

// 确定
const handleSure = () => {
  dialogVisible.value = false;
  getList();
};

// 取消
const handleClose = () => {
  dialogVisible.value = false;
};
// 分页
const handlePageChange = (newPage) => {
  searchFrom.value.pageNum = newPage.page;
  searchFrom.value.pageSize = newPage.limit;
  getList();
};
// 获取列表
const getList = () => {
  product.collectionsite
    .collectionsiteList({
      data: searchFrom.value,
    })
    .then((res) => {
      loading.value=false
      // console.log(res.data);
      tableData.value = res.data;
      total.value = res.total;
    });
};

// 表格状态控制
const handleStatusChange = (e) => {
  console.log(e.status);
  switchStatus.value = true;
  if (e.status) {
    // if(!Judgment.value) return
    proxy.$modal
      .confirm("确定需要修改此状态吗？")
      .then(() => {
        publicUpdateStatus(1, e.id, e.status)
      })
      .catch((err) => {
        switchStatus.value = false;
        if (e.status) {
          return (e.status = 0);
        } else {
          return (e.status = 1);
        }
      });
  } else {
    product.collectionsite
      .collectionsiteGetbyid({
        pathParams: {
          id: e.id,
        },
      })
      .then((res) => {
        if (res.code === 200) {
          let from = {
            status: e.status,//状态
            collectionTypeId: res.data.collectionTypeId, //采集站点所用的采集类型
            name: res.data.name, //采集网站
            url: res.data.url, //采集站点的地址
            languageId: res.data.languageId, //采集到的语言类型
            currencyId: res.data.currencyId, //采集到的货币Code
            description: res.data.description || null, //站点描述
          }
          proxy.$modal.prompt(from.description, '请填写关闭的原因', '内容不能为空，且不能以空格开头或结尾，长度必须在1~300个字符之间', '请输入，限制（1~300）').then(res => {
            from.description=res.value
            publicUpdateStatus(0, e.id, e.status, from)
          }).catch(err => {
            switchStatus.value = false;
            if (e.status) {
              return (e.status = 0);
            } else {
              return (e.status = 1);
            }
          })

        }
      })









  }
};

const getLanguage = () => {
  // 获取货币
  product.currency.currencyList().then((res) => {
    if (res.data?.length) {
      res.data = res.data.map((code) => {
        return {
          ...code,
          label: code.description,
          value: code.id,
        };
      });
    }
    sys_acquisition_currency.value = res.data;
  });

  // 获取采集类型
  product.collectiontype
    .collectiontypeList({
      data: {
        pageNum: 1,
        pageSize: 999,
        param: {},
      },
    })
    .then((res) => {
      if (res.data?.length) {
        res.data = res.data.map((code) => {
          return {
            ...code,
            label: code.name,
            value: code.id,
          };
        });
      }
      sys_acquisition_type.value = res.data;
    });

  // 获取语言
  product.language.languageList().then((res) => {
    sys_language_type.value = res.data;
  });
};
const publicUpdateStatus = (index, id, status, submitFrom) => {
  if (index) {

    product.collectionsite
      .collectionsiteUpdatestatus({
        pathParams: {
          id: id,
        },
        params: {
          status: status,
        },
      })
      .then((res) => {
        console.log("表格状态控制");
        proxy.$modal.msgSuccess("修改状态成功");
        switchStatus.value = false;
        getList();
      })
  } else {
    product.collectionsite
      .collectionsiteUpdate({
        pathParams: {
          id: id,
        },
        data: submitFrom,
      })
      .then((res) => {
        proxy.$modal.msgSuccess("修改状态成功");
        switchStatus.value = false;
        getList();
      })
  }

}

onMounted(() => {
  getList();
  getLanguage();
});
</script>
<style lang="scss" scoped></style>